<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2016/1/4 0004
  Time: 上午 10:23
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>网上办税厅状态</title>
</head>
<body>
    <div class="content-wrapper">
        <h3>网上办税厅状态</h3>
        <div class="row">
        	<div class="col-sm-12">
            <div class="panel widget col-sm-4 padding0">
                <div class="row row-table">
                    <div class="row row-table bg-purple">
                        <div class="col-xs-3 text-center bg-purple-dark pv-lg">
                            <em class="icon-globe fa-3x"></em>
                        </div>
                        <div class="col-xs-9 pv-lg">
                            <div class="h2 mt0">正常
                            </div>
                            <div class="text-uppercase">网上办税厅当前状态</div>
                            <hr/>
                            <div class="row">
                                <div class="col-xs-6">
                                    <div class="h4 mt0">1686人
                                    </div>
                                    <div style="font-size: 10px;">登陆人数</div>
                                </div>
                                <div class="col-xs-6">
                                    <div class="h4 mt0">30分钟
                                    </div>
                                    <div style="font-size: 10px;">本日平均在线时间</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="col-sm-5">
                
                        <div id="server-gauge" style="height: 182px;"></div>
                   
               
            </div>
            
            
            </div>
        </div>
        <div class="row">
            <div class="col-sm-7">
                <div class="panel panel-default">
                    <div class="panel-heading"></div>
                    <div class="panel-body">
                        <div id="bar1" style="height: 420px;"></div>
                    </div>
                </div>
            </div>

            <div class="col-sm-5">

                <div class="panel panel-default">
                    <div class="panel-heading"></div>
                    <div class="panel-body">
                        <div id="chart3" style="height: 420px;"></div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-sm-12">
                <div class="panel panel-default">
                    <div class="panel-heading"></div>
                    <div class="panel-body">
                        <div id="bar2" style="height: 420px;"></div>
                    </div>
                </div>
            </div>

           
        </div>

    </div>


<script>
		var dataMap = {};
		var initReportData = function(obj) {
			var pList = [ '南京', '苏州', '无锡', '徐州', '泰州', '连云港', '南通', '淮安',
					'盐城', '扬州', '镇江', '宿迁', '常州' ];
			var temp;
			var max = 0;
			for (var m = 1; m <= 12; m++) {
				temp = obj[m];
				for (var i = 0, l = temp.length; i < l; i++) {
		
					obj[m][i] = {
						value : temp[i]
					}
				}
				// obj[year+'max'] = Math.floor(max/100) * 100;
			}
			return obj;
		}
		
	dataMap.v = initReportData({
		1 : [ 12, 21, 10, 4, 12, 5, 6, 5, 25, 23, 7 ],
		2 : [ 12, 21, 10, 5, 12, 5, 6, 5, 25, 23, 10 ],
		3 : [ 12, 21, 10, 4, 15, 5, 6, 5, 25, 23, 7 ],
		4 : [ 12, 22, 10, 4, 12, 5, 6, 8, 25, 23, 7 ],
		5 : [ 12, 21, 10, 6, 12, 5, 6, 5, 25, 23, 11 ],
		6 : [ 12, 19, 10, 4, 19, 5, 6, 5, 23, 23, 7 ],
		7 : [ 12, 21, 10, 7, 12, 5, 6, 7, 25, 23, 7 ],
		8 : [ 12, 17, 10, 4, 12, 5, 6, 5, 25, 23, 12 ],
		9 : [ 12, 21, 10, 4, 10, 5, 6, 5, 25, 23, 7 ],
		10 : [ 12, 30, 10, 10, 12, 5, 6, 5, 25, 23, 7 ],
		11 : [ 12, 21, 10, 4, 13, 5, 6, 5, 23, 23, 7 ],
		12 : [ 12, 26, 10, 20, 12, 5, 6, 5, 25, 23, 7 ]
	});

	var barOption1 = {
		title : {
			text : '本日登陆人数',
			subtext : ''
		},
		tooltip : {
			trigger : 'axis'
		},

		calculable : true,
		xAxis : [ {
			type : 'category',
			axisLabel : { //横坐标60°倾斜
				rotate : 60
			},
			data : [ '南京', '苏州', '无锡', '徐州', '泰州', '连云港', '南通', '淮安', '盐城',
					'扬州', '镇江', '宿迁', '常州' ]
		} ],
		yAxis : [ {
			type : 'value'
		} ],
		series : [ {
			name : '登陆人数',
			type : 'bar',
			data : [ 20, 49, 70, 232, 256, 767, 1356, 1622, 1326, 1200, 624,
					1333, 999 ],
			markPoint : {
				data : [ {
					type : 'max',
					name : '最大值'
				}, {
					type : 'min',
					name : '最小值'
				} ]
			},
			markLine : {
				data : [ {
					type : 'average',
					name : '平均值'
				} ]
			}
		} ]
	};

	barOption2 = {
		
		timeline : {
			data : [ '2015-01-01', '2015-02-01', '2015-03-01',
					'2015-04-01', '2015-05-01', '2015-06-01', '2015-07-01',
					'2015-08-01', '2015-09-01', '2015-10-01', '2015-11-01',
					'2015-12-01' ],
			label : {
				formatter : function(s) {
					return s.slice(5, 7) + '月';
				}
			},
			autoPlay : true,
			playInterval : 1000
		},	
			
			
		options : [{
			title : {
				x : 'center',
				text : '月网上申报企业户数分城市统计',
				subtext : '',
				link : ''
			},
			tooltip : {
				trigger : 'item'
			},
			calculable : true,
			grid : {
				borderWidth : 0,
				y : 80,
				y2 : 60
			},
			xAxis : [ {
				type : 'category',
				show : false,
				data : [ '南京', '苏州', '无锡', '徐州', '泰州', '连云港', '南通', '淮安', '盐城',
						'扬州', '镇江', '宿迁', '常州' ]
			} ],
			yAxis : [ {
				type : 'value',
				show : false
			} ],
			series : [ {
				name : '',
				type : 'bar',
				itemStyle : {
					normal : {
						color : function(params) {
							// build a color map as your need.
							var colorList = [ '#C1232B', '#B5C334', '#FCCE10',
									'#E87C25', '#27727B', '#FE8463', '#9BCA63',
									'#FAD860', '#F3A43B', '#60C0DD', '#D7504B',
									'#C6E579', '#F4E001' ];
							return colorList[params.dataIndex]
						},
						label : {
							show : true,
							position : 'top',
							formatter : '{b}\n{c}'
						}
					}
				},
				data : dataMap.v['1']
			} ]
		},{
			series : [ {
				data : dataMap.v['2']
			} ]
		},{
			series : [ {
				data : dataMap.v['3']
			} ]
		},{
			series : [ {
				data : dataMap.v['4']
			} ]
		},{
			series : [ {
				data : dataMap.v['5']
			} ]
		},{
			series : [ {
				data : dataMap.v['6']
			} ]
		},{
			series : [ {
				data : dataMap.v['7']
			} ]
		},{
			series : [ {
				data : dataMap.v['8']
			} ]
		},{
			series : [ {
				data : dataMap.v['9']
			} ]
		},{
			series : [ {
				data : dataMap.v['10']
			} ]
		},{
			series : [ {
				data : dataMap.v['11']
			} ]
		},{
			series : [ {
				data : dataMap.v['12']
			} ]
		}
		
		
		
		]	
			
		
	};

	pipOption = {
		title : {
			text : '本月平均在线时间分城市统计',
			x : 'center'
		},
		tooltip : {
			trigger : 'item',
			formatter : "{b} :在线时长 {c}小时"
		},
		legend : {
			x : 'center',
			y : 'bottom',
			data : [ '南京', '苏州', '无锡', '徐州', '泰州', '连云港', '南通', '淮安', '盐城',
					'扬州', '镇江', '宿迁', '常州' ]
		},

		calculable : true,
		series : [ {
			name : '面积模式',
			type : 'pie',
			radius : [ 30, 110 ],
			center : [ '50%', 200 ],
			roseType : 'area',
			x : '50%', // for funnel
			max : 40, // for funnel
			sort : 'ascending', // for funnel
			data : [ {
				value : 10,
				name : '南京'
			}, {
				value : 5,
				name : '苏州'
			}, {
				value : 15,
				name : '无锡'
			}, {
				value : 25,
				name : '徐州'
			}, {
				value : 20,
				name : '泰州'
			}, {
				value : 35,
				name : '连云港'
			}, {
				value : 30,
				name : '淮安'
			}, {
				value : 40,
				name : '盐城'
			}, {
				value : 50,
				name : '扬州'
			}, {
				value : 45,
				name : '镇江'
			}, {
				value : 55,
				name : '宿迁'
			}, {
				value : 60,
				name : '常州'
			} ]
		} ]
	};

	var gaugeOption = {
		series : [ {
			name : '业务指标',
			type : 'gauge',
			startAngle : 180,
			endAngle : 0,
			center : [ '50%', '90%' ], // 默认全局居中
			radius : 150,
			axisLine : { // 坐标轴线
				lineStyle : { // 属性lineStyle控制线条样式,要搭配radius
					width : 100
				}
			},
			axisTick : { // 坐标轴小标记
				splitNumber : 10, // 每份split细分多少段
				length : 12, // 属性length控制线长
			},
			axisLabel : { // 坐标轴文本标签，详见axis.axisLabel
				formatter : function(v) {
					switch (v + '') {
					case '10':
						return '异常';
					case '50':
						return '正常';
					case '90':
						return '拥堵';
					default:
						return '';
					}
				},
				textStyle : { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
					color : '#fff',
					fontSize : 15,
					fontWeight : 'bolder'
				}
			},
			pointer : {
				width : 30,
				length : '90%',
				color : 'rgba(255, 255, 255, 0.8)'
			},
			title : {
				show : true,
				offsetCenter : [ 0, '-60%' ], // x, y，单位px
				textStyle : { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
					color : '#fff',
					fontSize : 10
				}
			},
			detail : {
				show : true,
				backgroundColor : 'rgba(0,0,0,0)',
				borderWidth : 0,
				borderColor : '#ccc',
				width : 100,
				height : 40,
				offsetCenter : [ 0, -40 ], // x, y，单位px
				formatter : function(v) {
					switch (v + '') {
					case '10':
						return '异常';
					case '50':
						return '正常';
					case '90':
						return '拥堵';
					default:
						return '';
					}
				},
				textStyle : { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
					fontSize : 30
				}
			},
			data : [ {
				value : 50,
				name : '网上办税厅服务器状态'
			} ]
		} ]
	};

	var gaugeChart = null;
	var echarts = null;
	require.config({
		paths : {
			echarts : '${ctx}/assets/echarts/build/dist'
		}
	});
	require([ 'echarts', 'echarts/chart/bar', 'echarts/chart/scatter',
			'echarts/chart/pie', 'echarts/chart/map', 'echarts/chart/tree',
			'echarts/chart/funnel', 'echarts/chart/gauge',
			'echarts/chart/wordCloud'

	], function(ec) {
		//江苏省税务业务办理事项统计
		echarts = ec;

		var barChart1 = ec.init(document.getElementById('bar1'));
		barChart1.setOption(barOption1, true);

		var barChart2 = ec.init(document.getElementById('bar2'));
		barChart2.setOption(barOption2, true);

		var chart3 = ec.init(document.getElementById('chart3'));
		chart3.setOption(pipOption, true);

		gaugeChart = echarts.init(document.getElementById('server-gauge'),
				'macaroons');
		setInterval(function() {
			gaugeOption.series[0].data[0].value = (Math.random() * 100)
					.toFixed(2) - 0;
			gaugeChart.setOption(gaugeOption, true);
		}, 2000)

	})
</script>
</body>
</html>
